<!-- 提现 -->
<template>
	<view class="container">
		<view class="cut"></view>
		<view class="bank">
			<text>提现至:</text>
			<view class="bankNum">
				<text class="bankName">{{bankName?bankName:''}}</text>
				<text class="bankCode">({{bankCode?bankCode:''}})</text>
			</view>
		</view>
		<view class="cut"></view>
		<view class="cell">
			<view class="title">
				<text>提现黑贝壳</text>
				<text>当前黑贝壳</text>
				<image src="../../static/images/public/shellIcon.png" mode=""></image>
				<text>{{cash?cash:''}}</text>
			</view>
			<image @tap.stop="markTips" class="mark-img" src="/static/images/center/icon/5.png" mode=""></image>
			<view class="inputGroup">
				<input type="number" placeholder="请输入提现贝壳数" placeholder-style="font-weight:normal;font-size: 32rpx;" v-model="count" />
				<view class="all" @tap="all">全部提现</view>
			</view>
			<view class="surplus">
				<text>提现成功后还剩余</text>
				<image src="../../static/images/public/shellIcon.png" mode=""></image>
				<text>{{surplus}}</text>
			</view>
		</view>
		<view class="cut"></view>
		<view class="cell">
			<view class="title">
				<text>预计到账金额</text>
			</view>
			<view class="inputGroup">
				<input type="number" disabled="true" placeholder-style="font-weight:normal;font-size: 32rpx;" v-model="predict" />
			</view>
			<view class="surplus">
				<text>{{count?extract_fee:''}}</text>
			</view>
		</view>
		<view class="cut"></view>
		<view class="loginBtn" @tap="act&&keyboradShown()" :class="act? 'active' : ''">
			提 现
		</view>
		<newModel ref="newModel" :content="content" confirmText="我知道了"></newModel>
		<passkeyborad :show="keyboradShow" @close="keyboradClose" @finish="finished"></passkeyborad>
	</view>
</template>

<script>
	import {
		checkPassword
	} from "@/api/user.js"
	import {
		applyshellwithdraw,
		getsellershellcount,
		sellerIndex
	} from "@/api/merchant.js"
	import {
		shellList
	} from "@/api/shell.js"
	import {
		systemConfig
	} from '@/api/public.js'
	import utils from '@/common/utils.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'
	import newModel from '@/components/new_model/new_model.vue'
	export default {
		components: {
			uniPopup,
			passkeyborad,
			newModel
		},
		data() {
			return {
				bankName: '',
				bankCode: '',
				surplus: 0,
				count: null,
				cash: null,
				predict: 0,
				act: false,
				keyboradShow: false,
				shell_id: null,
				shell_type: null,
				poundage: 0, //提现金额
				extract_fee: '', //手续费描述
				rate: 0, //费率
				withdrawal_rule: {}, //提现手续费规则
				content: [],
			}
		},
		onLoad(options) {
			this.sellerIndex();
			uni.setNavigationBarTitle({
				title: options.name + "提现"
			})
			this.shell_id = Number(options.id);
			this.getShell(this.shell_id);
		},
		watch: {
			count: {
				deep: true,
				handler(val, oldval) {
					this.countInput();
				}
			}
		},
		methods: {
			sellerIndex() {
				sellerIndex().then(res => {
					this.bankName = res.data.seller_info.bank_real_name;
					this.bankCode = res.data.seller_info.bank_card_number.slice(-4);
				})
			},
			markTips() {
				this.$refs.newModel.show()
			},
			countInput(e) {
				this.$nextTick(function() {
					this.count = utils.verifyNum(this.count)
					if (Number(this.count) > Number(this.cash)) {
						this.count = String(this.cash)
					}
					this.surplus = String((Number(this.cash) - Number(this.count)).toFixed(2))
					let bank_type = uni.getStorageSync('sellerInfo').bank_type
					let withdrawCash = Number(this.count) * Number(this.rate)
					if (bank_type == 1) {
						if (withdrawCash <= Number(this.withdrawal_rule.private_service_fee)) {
							this.extract_fee = "提现金额低于手续费"
							this.predict = 0
							this.act = false
						} else if (this.withdrawal_rule.private_service_fee < withdrawCash && withdrawCash <= this.withdrawal_rule.money) {
							this.extract_fee = "提现手续费" + this.withdrawal_rule.private_service_fee + "元"
							this.predict = (withdrawCash - Number(this.withdrawal_rule.private_service_fee)).toFixed(2)
							this.act = true
						} else {
							this.extract_fee = "免手续费"
							this.predict = withdrawCash.toFixed(2)
							this.act = true
						}
					} else if (bank_type == 2) {
						if (withdrawCash <= Number(this.withdrawal_rule.public_service_fee)) {
							this.extract_fee = "提现金额低于手续费"
							this.predict = 0
							this.act = false
						} else {
							this.extract_fee = "提现手续费" + this.withdrawal_rule.public_service_fee + "元"
							this.predict = (withdrawCash - Number(this.withdrawal_rule.public_service_fee)).toFixed(2)
							this.act = true
						}
					}

				})
			},
			getShell(id) {
				uni.showLoading({
					mask:true
				})
				shellList().then(res => {
					this.withdrawal_rule = res.data.withdrawal_rule
					this.content = [
						'普惠生活贝壳提现规则：',
						'1. 针对用户或商户贝壳提现，提现至对私银行账户的贝壳转换可提现金额在' + this.withdrawal_rule.money + '元及以下自动审核、单笔' + this.withdrawal_rule.private_service_fee + '元手续费、自动到账 ，' + this.withdrawal_rule.money + '元以上需人工审核、免手续费；',
						'2. 针对用户或商户余额提现，提现至对公银行账户的贝壳转换可提现金额需人工审核、单笔' + this.withdrawal_rule.public_service_fee + '元手续费。'
					]
					getsellershellcount().then(res => {
						res.data.list.map((val, key) => {
							if (id == val.id) {
								this.cash = val.count;
								this.rate = val.shell_rate
								uni.hideLoading()
							}
						})
					})
				})
			},
			all() {
				this.count = this.cash
			},
			addCard() {
				uni.navigateTo({
					url: '/pages/center/accountSet/bank/addBank?backurl=' + '/pages/center/balance/balanceWithdraw'
				})
			},
			keyboradShown() {
				if (Number(this.count) == 0) {
					return uni.showToast({
						title: '请输入大于0的贝壳数',
						icon: 'none',
						duration: 1000
					})
				}
				this.keyboradShow = true
			},
			finished(password) {
				checkPassword({
					password: password
				}, this.keyboradClose()).then(res => {
					this.withdraw()
				})
			},
			withdraw() {
				if (this.shell_id == 1) {
					this.shell_type = 1;
				} else if (this.shell_id == 2) {
					this.shell_type = 2;
				} else if (this.shell_id == 3) {
					this.shell_type = 3;
				} else if (this.shell_id == 4) {
					this.shell_type = 4;
				}
				uni.showLoading({
					mask:true
				})
				let item = {
					title: '提现已提交',
					count: this.count,
					bank: this.bankName,
					code: this.bankCode,
					poundage: this.poundage,
					money: this.predict
				}
				applyshellwithdraw({
					num: Number(this.count),
					ty: this.shell_type, //(1黑贝壳2红贝壳3蓝贝壳4黄贝壳)
					shell_id: this.shell_id,
					extract_type: "bank" //bank(‘alipay’,’bank’,’weixin’)
				}).then(res => {
					uni.showToast({
						title: res.msg,
						duration: 1500,
						icon: "none"
					})
					setTimeout(function() {
						uni.redirectTo({
							url: `/business/wallet/withdrawSuccess?item=${ encodeURIComponent(JSON.stringify(item)) }`
						})
					}, 1000)
				})
			},

			close() {
				this.$refs.popup.close()
			},
			keyboradClose() {
				this.keyboradShow = false
			}
		},
		onHide() {
			this.$refs.popup.close()
		}
	};
</script>

<style lang="scss" scoped>
	.cut {
		width: 750rpx;
		height: 24rpx;
		background: rgba(238, 238, 238, 1);
	}

	.bank {
		width: 690rpx;
		height: 130rpx;
		padding: 0 30rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;

		position: relative;

		text:nth-of-type(1) {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			margin-right: 6rpx;
		}

		.bankNum {
			display: flex;

			.bankName {
				font-size: 26rpx;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
			}

			.bankCode {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}
		}

		.cell-more {
			position: absolute;
			right: 30rpx;
			color: #E5E5E5;
		}
	}

	.cell {
		width: 690rpx;
		height: 283rpx;
		padding: 0 30rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		position: relative;

		.title {
			display: flex;
			align-items: flex-end;
			padding: 40rpx 0 10rpx;

			text:nth-of-type(1) {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-right: 20rpx;
			}

			image {
				margin: 0 10rpx;
				padding-bottom: 4rpx;
				width: 30rpx;
				height: 20rpx;
			}
		}
		.mark-img{
			position: absolute;
			top: 40rpx;
			right: 30rpx;
			width: 40rpx;
			height: 40rpx;
		}

		.inputGroup {
			position: relative;
			color: #333;

			input {
				height: 90rpx;
				line-height: 90rpx;
				font-size: 60rpx;
				font-weight: bold;
				border-bottom: 1rpx solid #eee;
			}

			.all {
				position: absolute;
				right: 0;
				bottom: 20rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(87, 190, 106, 1);
				z-index: 2;
			}

		}

		.surplus {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			font-size: 20rpx;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);

			image {
				width: 24rpx;
				height: 16rpx;
				margin: 0 10rpx;
			}
		}
	}

	.loginBtn {
		position: fixed;
		bottom: 60rpx;
		left: 75rpx;
		width: 600rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: rgba(220, 220, 220, 1);
		line-height: 80rpx;
		text-align: center;
		color: #ffffff;
		font-size: 32rpx;
	}


	.active {
		background-color: $theme-color;
	}

	.sellerType {
		width: 542rpx;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 0 30rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: relative;

		.close {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			width: 24rpx;
			height: 24rpx;
		}

		.title {
			font-size: 34rpx;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}

		.uni-list-cell {
			display: flex;
			justify-content: space-between;
			line-height: 100rpx;
			border-bottom: 1rpx solid #eee;

			view {
				text:nth-of-type(2) {
					color: #999;
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}
		}

		.uni-list-cell:nth-of-type(1) {
			border-bottom: 1rpx solid #f5f5f5;
		}

		.addCard {
			display: flex;
			justify-content: space-between;

			.cell-more {
				color: #e5e5e5;
			}
		}
	}
</style>
